<template>
  <div class="wrap">
    <main>
      <!-- <h1>全部商品</h1> -->
      <div class="Allgoodsbox">
        <!-- <div></div> -->
        <div
          v-for="(item, index) in goods"
          :key="item.id"
          class="Allgoods"
          @click="goParticulars(item.id)"
        >
          <!-- <div>{{ item.id }}</div> -->
          <div class="del" @click.stop="delFN(index)">
            <i class="el-icon-delete-solid"></i>
          </div>
          <div class="imgbox">
            <img :src="item.s_goods_photos[0].path" alt="" />
          </div>
          <p>{{ item.name }}</p>
          <!-- <p>{{ item.desc }}</p> -->
          <p>¥{{ item.price }}</p>
        </div>
        <!-- <div class="box"></div> -->
      </div>
    </main>
  </div>
</template>

<script>
import { singleshop } from "../../api/test.js";
export default {
  data() {
    return {
      goods: [],
      GoodSid: JSON.parse(localStorage.getItem("Bhistory")),
    };
  },
  created() {
    //从sessionStorage拿到数组遍历
    // this.Allgoods = JSON.parse(sessionStorage.getItem("headerClassify"));
    // this.Allgoods.forEach((item) => {
    //   console.log(item);
    //   item.s_goods.forEach((item2) => {
    //     this.goods.push(item2);
    //   });
    // });
    // console.log(this.goods);
  },
  async mounted() {
    console.log(this.GoodSid);

    for (let val of this.GoodSid) {
      let res = await singleshop(val);
      this.goods.push(res.data.result);
    }
  },
  methods: {
    //去往商品详情页
    goParticulars(id) {
      this.$router.push({ path: `/particulars/${id}` });
    },
    delFN(index) {
      this.goods.splice(index, 1);
      this.GoodSid.splice(index, 1);
      localStorage.setItem("Bhistory", JSON.stringify(this.GoodSid));
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  background-color: #f7f7f7;
  width: 100%;
  //   height: 100%;
  display: flex;
  justify-content: center;
  main {
    // display: flex;
    // justify-content: center;
    width: 100%;
    .Allgoodsbox {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      // margin: 100px auto;

      .Allgoods {
        display: block;
        //   justify-content: space-between;
        flex-wrap: wrap;
        //   width: 90%;
        margin: 10px 2%;
        width: 29.3%;
        height: 400px;
        background-color: #fff;
        margin-top: 20px;
        transition: 0.5s;
        position: relative;
        &:hover {
          box-shadow: 0 3px 15px gray;
          transform: translateY(-2px);
          cursor: pointer;
        }
        .del {
          position: absolute;
          right: 7%;
          top: 5%;
          i {
            font-size: 20px;
          }
          &:hover {
            i {
              color: red;
            }
          }
        }
        .imgbox {
          margin: 0 auto;
          padding-top: 50px;
          padding-bottom: 50px;
          width: 172px;
          height: 172px;
          img {
            height: 100%;
          }
        }
      }
      .box {
        width: 342px;
        height: 420px;
      }
    }
  }
}
</style>
